<style scoped lang="less">
  @media screen and (max-width: 1492px) and  (min-width: 1505px){
    .resultsInfo{
      .file {
        p{
          line-height: 26px !important;
        }
      }
    }
  }
  @media screen and (max-width: 1504px) and  (min-width: 1341px){
    .resultsInfo{
      .file {
        p{
          line-height: 24px !important;
        }
      }
    }
  }
  @media screen and (max-width: 1341px) and  (min-width: 1227px){
    .resultsInfo{
      .file {
        p{
          line-height: 22px !important;
        }
      }
    }
  }
  @media screen and (max-width: 1227px) and  (min-width: 1120px){
    .resultsInfo{
      .file {
        p{
          line-height: 20px !important;
        }
      }
    }
  }
  @media screen and (max-width: 1120px) and  (min-width: 960px){
    .resultsInfo{
      .file {
        p{
          line-height: 18px !important;
        }
      }
    }
  }
@media screen and (min-width: 829px) {
  .resultsInfo {
    background:rgba(246,247,251,1);
    .resultsInfoWrap{
      max-width: 80%;
      margin: auto;
      /*min-height: 3.57rem;*/
      padding-bottom: 4.4rem;
    }
    .word {
      height:4.86rem;
      background:rgba(248,243,235,1);
      border-radius: 0.21rem ;
      margin-top: 4.2rem;
      width: 100%;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 4.86rem;
      font-size: 1.57rem;
      div:nth-child(1) {
        padding-left: 3rem;
        float: left;
        img {
          vertical-align: middle;
        }
      }
      div:nth-child(2) {
        padding-right: 3rem;
        float: right;
      }
    }

    .fileWrap {
      background-color: white;
      /*padding-top: 3.14rem;*/
      /*min-height: 42.57rem;*/
      min-height: 56.57rem;
      /*display: flex;*/
      /*justify-content: center;*/
      /*align-items: center;*/
      position: relative;
      /*margin-bottom: 3rem;*/
      /*margin-bottom: 4.43rem;*/
      .file {
        width: 80%;
        /*text-align: center;*/
        /*vertical-align: middle;*/
        /*min-height: 19rem;*/
        /*min-height: 30.7rem;*/
        position: absolute;
        /*top:3.1rem;*/
        /*left: 9.2rem;*/
        margin-left: 10%;
        padding-top: 3.1rem;
        overflow: hidden;
        p{
          letter-spacing: 2px;
          font-family: Source Han Sans CN;
          /* line-height: 24px; */
          /*text-indent: 2em;*/
          /*overflow: hidden;*/
          /*line-height: 27px;*/
          /*color: #666666;*/
          /*max-height: 33rem;*/
          max-height: 49rem;
        }
      }
      .downloadWrap {
        /*position: absolute;*/
        /*margin-top: 3rem;*/
        height: 3rem;
        p {
          /*float: left;*/
          /*padding-top: 1rem;*/
          /*padding-left: 10%;*/
          position: absolute;
          left: 9.2rem;
          bottom: 2.5rem;
          span {
            color: #CE0000;
          }
        }
        div {
          position: absolute;
          right: 9.2rem;
          bottom: 1.5rem;
          cursor: pointer;
          width: 8rem;
          height: 2.86rem;
          background-color: #F37D0A;
          border-radius: 0.29rem;
          color: white;
          text-align: center;
          line-height: 2.86rem;
          span:nth-child(1) {
            font-size: 1.6rem;
          }
          span:nth-child(2) {
            font-size: 1rem;
          }
        }
      }
    }
    .num span:nth-child(1){
      display: none;
    }
    .num span:nth-child(2){
      font-size:1rem;
      
      color:rgba(153,153,153,1);
    }

    .time,
    .time-img {
      display: none
    }
    .downloadWrap-phone{
      display: none;
    }
  }
}

@media screen and (max-width: 829px) {
  .resultsInfo {
    * {
      box-sizing: border-box;
    }
    .word {
      padding: 0 0.3rem;
      padding-top: 0.6rem;
    }
    .title {
      font-size: 0.54rem;
      color: #1a1a1a;
      img {
        display: none
      }
    }
    .time-box {
      padding: 0.25rem 0;
      font-size: 0.22rem;
      color: #888;
      vertical-align: middle;
      .time-img {
        width: 0.28rem;
        margin-top: 0.05rem;
        vertical-align: top;
      }
      .eye {
        display: none
      }
      .time{
        padding-right: 0.2rem;
      }
    }
    .downloadWrap {
      display: none;
    }
    .downloadWrap-phone {
      position: fixed;
      right: 0;
      bottom: 1rem;
      p {
        background-color: #1a1a1a;
        color: #fefefe;
        font-size: 0.28rem;
        padding: 0.22rem;
        display: inline-block;
        vertical-align: top;
        margin-top: 0.15rem;
        position: relative;
        margin-right: 0.35rem;
        transform-origin:100%;
        transform:rotateY(90deg);
        transition:transform 0.3s
      }
      p:after {
        content: ' ';
        display: block;
        position: absolute;
        width: 0.2rem;
        height: 0.2rem;
        background-color: #1a1a1a;
        transform: rotate(45deg);
        right: -0.1rem;
        top: 0.3rem;
      }
      .touch{
        transform:rotateY(0deg)
      }
    }
    .down {
      height: 1.14rem;
      width: 1.14rem;
      background-color: #FD9D40;
      border-radius: 50%;
      text-align: center;
      /*display: inline-block;*/
      display: none;
      img {
        width: 0.6rem;
        margin-top: 0.2rem;
      }
    }
    .fileWrap {
      font-size: 0.32rem;
      padding: 0.3rem;
      color: #3E3A39
    }
    .file{
      min-height: 5rem;
    }
  }
}

</style>
<template>
  <div class="resultsInfo">
    <div class="resultsInfoWrap">
      <section class="word clear">
        <div class="title">
          <img :src="resultInfo.extendInfo" alt="">
          <span>{{resultInfo.title}}</span>
        </div>
        <div class="time-box">
          <span class="icon-eye eye" style="font-size: 1rem;color: #999999"></span>
          <img class="time-img" :src="resultInfo.extendInfo">
          <span class="time">发布时间：{{$bw.format(resultInfo.postTime,'date')}}</span>
          <span class="num"><span>阅读量：</span><span>{{resultInfo.categoryCode}}</span></span>
        </div>
      </section>
      <section class="fileWrap">
        <div class="file">
          <!--<p>{{resultInfo.body}}</p>-->
          <p v-html="resultInfo.body"></p>
        </div>
        <!--<iframe class="file" :src="resultInfo.showImageUrl">-->

        <!--</iframe>-->
        <section class="downloadWrap clear">
          <p>
            <span>*</span>{{resultInfo.abstract}}
          </p>
          <!--<div class="down" v-show="resultInfo.isOriginal" @click="downFile(resultInfo.showImageUrl)">-->
          <a :download="resultInfo.title" :href="resultInfo.showImageUrl">
            <div class="down" v-show="resultInfo.isOriginal">
              <span class="icon-down down"></span><span>下载文件</span>
            </div>
          </a>
        </section>
      </section>
      <section class="downloadWrap-phone">
        <p :class="[isTouch?'touch':'']">
          <span>*</span>此文件支持下载
        </p>
        <div id="down" class="down">
          <img src="../../static/img/教师.png">
        </div>
      </section>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isTouch:false,
      resultInfo:{},
      pdfAddress:''
    }
  },
  components: {

  },
  props:['rootInfo'],
  methods: {
//    downFile(url){
//      console.log(url)
//      if(url.indexOf('.jpg')>-1||url.indexOf('.png')>-1||url.indexOf('.jpeg')>-1||url.indexOf('.bmp')>-1||url.indexOf('.gif')>-1||url.indexOf('.svg')>-1||url.indexOf('.mp3')>-1||url.indexOf('.mp4')>-1)
//      {
////        this.savepic(url);
//        console.log('不能下载')
//      }else {
//        window.open(url)
//      }
//    },
////    savepic(url) {
////      //如果隐藏IFRAME不存在，则添加
////      if (!document.getElementById("IframeReportImg"))
////        $('<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" onload="DoSaveAsIMG();" width="0" height="0" src="about:blank"></iframe>').appendTo("body");
////      if (document.all.IframeReportImg.src != imgPathURL) {
////        //加载图片
////        document.all.IframeReportImg.src = imgPathURL;
////      }
////      else {
////        //图片直接另存为
////        if (document.all.IframeReportImg.src != "about:blank")
////          document.frames("IframeReportImg").document.execCommand("SaveAs");
////      }
////    },
    downtouchstart(){
      this.isTouch=true;
    },
    downtouchend(){
      this.isTouch=false;
    },
    getResultInfo(){
      let contentId = this.$route.query.contentId
      this.$service('/api/CMSMain/GetContentDetail?contentId='+contentId, 'get',{}).then((response) => {
        this.resultInfo = response.Data
        this.resultInfo.categoryCode=Number(this.resultInfo.categoryCode)+1;
//        处理为pdf
//        if(this.resultInfo.tags.includes('doc')||this.resultInfo.tags.includes('xls')||this.resultInfo.tags.includes('ppt')||this.resultInfo.tags.includes('txt')){
//          this.resultInfo.showImageUrl = this.resultInfo.showImageUrl.substring(0,this.resultInfo.showImageUrl.lastIndexOf('.'))+'.pdf'
//        }
      })
        .catch(err=>{
//          this.fullscreenLoading=false;
        })
    },
  },
    mounted() {
    document.getElementById('down').addEventListener('touchstart', this.downtouchstart);
    document.getElementById('down').addEventListener('touchend', this.downtouchend);
    this.getResultInfo();
  },
}

</script>
